<template>
	<div>
		<el-breadcrumb separator="/" class="registration-list">
		  <el-breadcrumb-item class='home-list' :to="{ path: '/' }">活动列表</el-breadcrumb-item>
		  <el-breadcrumb-item>报名管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- <div >报名管理</div> -->
		<div class="list-title">【{{title}}】</div>
		<div class="order-selected">
			<el-form ref="form" :inline="true" label-width="100px">
                <el-form-item style='width:250px' label="订单号：">
                    <el-input style='width:150px' v-model="ordernum" placeholder='请输入订单号'></el-input>
                </el-form-item>
                <el-form-item style='width:200px' label="订单状态：">
                    <el-select style='width:100px' @change='getStatus' v-model="status" placeholder="全部">
                        <el-option v-for='item in orderStatus' :key='item.status' :label="item.name" :value="item.status"></el-option> 
                    </el-select>
                </el-form-item>
                <el-form-item style='width:200px' label='支付方式:'>
                	<el-select style='width:100px' @change='getPayType' v-model="paytype" placeholder="全部">
                		<el-option  label="全部" value=""></el-option> 
                        <el-option  label="微信支付" value="2"></el-option> 
                        <el-option  label="积分支付" value="1"></el-option> 
                    </el-select>
                </el-form-item>
                <el-form-item style='width:200px' label='渠道:'>
                	<el-select style='width:100px' @change='getPayChannel' v-model="channel" placeholder="微信">
                        <el-option  label="微信" value="weixin"></el-option> 
                        <el-option  label="APP" value="app"></el-option> 
                        <el-option  label="小程序" value="XCX"></el-option> 
                    </el-select>
                </el-form-item>
                
                <br/>
                <el-form-item label='订单时间：' style='width:480px'>
                    <el-date-picker
                    	 style='width:180px'
                        v-model="selectDateStart"
                        @change='getStartDate'
                        placeholder="选择起始时间">
                    </el-date-picker>
                    <el-date-picker
                    	style='width:180px'
                        v-model="selectDateEnd"
                        @change='getEndDate'
                        placeholder="选择结束时间">
                    </el-date-picker>
                </el-form-item> 
                 <el-form-item style='width:250px' label='门票状态:'>
                	<el-select style='width:150px' @change='getHxstatus' v-model="hxstatus" placeholder="全部">
                		<el-option  label="全部" value=""></el-option> 
                        <el-option  label="已核销" value="1"></el-option> 
                        <el-option  label="未核销" value="0"></el-option> 
                    </el-select>
                </el-form-item>
                <el-form-item style='position:absolute;right:20px;bottom:0px;'>
                	<el-button type='danger'  class='serch-btn' @click='handleCleanData'>清空</el-button>
                	<el-button type='primary' class='serch-btn'  @click='handleSerachData'>查询</el-button>
                </el-form-item>     
            </el-form>
        </div>
		<div style="text-align:right">
			<a :href='put_url + "/marketweb/orderback/excel_enroll?actionId=" + actionId + "&keyAdmin=" + keyAdmin + "&channel=" + channel'>
				<el-button type="primary" class='pass-btn'>
					导出
				</el-button>
			</a>	
		</div>
        <el-table
	    ref="multipleTable"
	    :data="enrolllist"
	    :border='false'
	    v-loading.body="loading"
	    tooltip-effect="dark"
	    style="width: 100%;margin:10px 0">
	    <el-table-column
	      label="姓名"
	      >
	      <template scope="scope">{{ scope.row.enrollname }}</template>
	    </el-table-column>
	    
	    <el-table-column
	      label="手机号码"
	       width='130%'
	      >
	      <template scope="scope">{{ scope.row.enrollphone}}</template>
	    </el-table-column>
	    <el-table-column
	      label="报名订单"
	      width='130%'
	      >
	      <template scope="scope">{{ scope.row.ordernum }}</template>
	    </el-table-column>
	    <el-table-column
	      label="预约时间"
	      width='130%'
	      >
	      <template scope="scope">{{ scope.row.yuyuedate }}</template>
	    </el-table-column>
	    <el-table-column
	      label="订单时间"
	      width='110%'
	      >
	      <template scope="scope"><div style="width:80px;">{{ scope.row.orderdate }}</div></template>
	    </el-table-column>
	    <el-table-column
	      label="票种"
	      >
	      <template scope="scope">{{ scope.row.ticketTitle }}</template>
	    </el-table-column>
	    <el-table-column
	      label="状态"
	      >
	      <template scope="scope">{{ scope.row.status }}</template>
	    </el-table-column>
		<el-table-column
	      label="渠道"
	      >
	      <template scope="scope">
	      	<div v-if="scope.row.channel=='weixin'">
   				微信
    	   	</div>
    	    <div v-if="scope.row.channel=='XCX'">
   				小程序
    	   	</div>
    	   	<div v-if="scope.row.channel=='app'">
   				APP
    	   	</div>
	      </template>
	    </el-table-column>
	    <el-table-column
	      label="核销码"
	     >
	      <template scope="scope">{{ scope.row.codes }}</template>
	    </el-table-column>
	    <el-table-column
	      label="是否核销"
	      >
	       <template scope="scope">{{ scope.row.hxstatus == 0 ? '未核销' : '已核销' }}</template>
	    </el-table-column>
	    <el-table-column label="操作" >
	      <template scope="scope">
	      	<router-link :to="{path:'/activity/list/registration_management/' +scope.row.detailId,query:{activityId:actionId}}">
		        <el-button size="small" @click='getActivityTitle'>查看</el-button>
	      	</router-link>
	      </template>
    	</el-table-column>
	  </el-table>

	  <div class="block page-pagination">
			<el-pagination
		        :current-page="currentPage"
		        :page-sizes="pageSizes"
		        :page-size="pageSize"
		        @size-change='getPageSizes'
		        @current-change="handleCurrentChange"
		        layout="total, sizes, prev, pager, next"
			    :total="count">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				title:this.$route.query.title,
				actionId:this.$route.params.id,
				keyAdmin:this.$store.state.keyAdmin,
				put_url:process.env.API_ROOT_URL,
				ordernum:'',
				status:'',
				hxstatus:'',
				paytype:'',
				channel:'weixin',
				loading:true,
				enrolllist:null,
				selectDateStart:'',
				selectDateEnd:'',
				currentPage:1,
				pageSizes:[10,15,20],
				pageSize:10,
				count:null,
				orderStatus:[{
					name:'全部',
					status:''
				},{
					name:'待审核',
					status:0
				},{
					name:'未通过',
					status:1
				},{
					name:'待付款',
					status:2
				},{
					name:'已完成',
					status:3
				},{
					name:'已核销',
					status:4
				},{
					name:'已取消',
					status:6
				}]
			}
		},
		components:{
		},

		methods:{
			handleOpenLink(){
			},

			getPayChannel(val){
				this.channel = val
			},

			getListData(){
				this.$http.post('marketweb/orderback/queryActionEnrolls',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.actionId,
					pageNum:this.currentPage,
					pageSize:this.pageSize,
					ordernum:this.ordernum,
					status:this.status,
					channel:this.channel,
					hxstatus:this.hxstatus,
					orderdateStart:this.selectDateStart,
					orderdateEnd:this.selectDateEnd,
					paytype:this.paytype
				}).then(response=>{
					if(response.body.code == 200){
						this.enrolllist = response.body.enrolllist,
						this.count = response.body.count;
						this.loading = false;
						for (var i = 0; i < this.enrolllist.length; i++) {
							if(this.enrolllist[i].status == 0){
								this.enrolllist[i].status = '待审核'
							}else if(this.enrolllist[i].status == 1){
								this.enrolllist[i].status = '未通过'
							}else if(this.enrolllist[i].status == 2){
								this.enrolllist[i].status = '待付款'
							}else if(this.enrolllist[i].status == 3){
								this.enrolllist[i].status = '已完成'
							}else if(this.enrolllist[i].status == 4){
								this.enrolllist[i].status = '已核销'
							}else if(this.enrolllist[i].status == 6){
								this.enrolllist[i].status = '已取消'
							}
						}
					}else{
						this.loading = false;
						this.$message.error(response.body.msg)
					}
				},response=>{
					this.loading = false;
					this.$message.error('获取报名信息失败')
				})
			},

			getPayType(val){
				this.paytype=val
			},

			getStatus(val){
				this.status = val;
			},

			getHxstatus(val){
				this.hxstatus=val
			},

			handleCleanData(){
				this.ordernum = '',
				this.status = '',
				this.paytype = '',
				this.hxstatus = '',
				this.selectDateStart = ''
				this.selectDateEnd = ''
				window.sessionStorage.removeItem('ordernum')
				window.sessionStorage.removeItem('status')
				window.sessionStorage.removeItem('paytype')
				window.sessionStorage.removeItem('hxstatus')
				window.sessionStorage.removeItem('selectDateStart')
				window.sessionStorage.removeItem('selectDateEnd')
			},

			handleSerachData(){
				window.sessionStorage.ordernum = this.ordernum,
				window.sessionStorage.hxstatus = this.hxstatus,
				window.sessionStorage.status = this.status,
				window.sessionStorage.paytype = this.paytype,
				window.sessionStorage.selectDateStart = this.selectDateStart,
				window.sessionStorage.selectDateEnd = this.selectDateEnd
				this.getListData()
			},

			getStartDate(val){
				this.selectDateStart = val;
			},

			getEndDate(val){
				this.selectDateEnd = val;
			},

			getPageSizes(size){
	        	this.pageSize = size;
	        	window.sessionStorage.pageSize = this.pageSize,
	        	this.getListData()
	        },

	         handleCurrentChange(val){
	        	this.currentPage = val;
	        	window.sessionStorage.currentPage = this.currentPage,
	        	this.getListData()
	        },

			handleSelectionChange(){

			},

			getActivityTitle(){
				window.sessionStorage.title = this.title
			}
		},

		beforeRouteEnter(to,from,next){
			next(vm=>{
				if(from.name == 'RegistrationManagement'){
          			vm.ordernum = window.sessionStorage.ordernum?window.sessionStorage.ordernum :''
          			vm.hxstatus = window.sessionStorage.hxstatus?window.sessionStorage.hxstatus :''
         			vm.selectDateStart = window.sessionStorage.selectDateStart&&window.sessionStorage.selectDateStart!='undefined'?window.sessionStorage.selectDateStart:''
          			vm.selectDateEnd = window.sessionStorage.selectDateEnd&&window.sessionStorage.selectDateEnd!='undefined'?window.sessionStorage.selectDateEnd:''
          			vm.status =  window.sessionStorage.status?parseInt(window.sessionStorage.status):''
          			vm.paytype =  window.sessionStorage.paytype?parseInt(window.sessionStorage.paytype):''
					vm.pageSize = window.sessionStorage.pageSize ? parseInt(window.sessionStorage.pageSize) : 10
					vm.currentPage = window.sessionStorage.currentPage ? parseInt(window.sessionStorage.currentPage) : 1
				}else{
					window.sessionStorage.removeItem('ordernum')
					window.sessionStorage.removeItem('hxstatus')
					window.sessionStorage.removeItem('status')
					window.sessionStorage.removeItem('paytype')
					window.sessionStorage.removeItem('selectDateStart')
					window.sessionStorage.removeItem('selectDateEnd')
				}
				vm.getListData()
			})
		}
	}
</script>
<style scoped>
	.registration-list{
		padding:10px 0;
		margin-bottom:10px;
		border-bottom:1px solid #569efe;
		font-size: 16px;
		color: #569efe;
	}
	.order-selected{
		padding-top: 5px;
		margin: 10px 0;
		position: relative;
		background: #eee;
	}
	.list-title{
		margin:12px -8px;
		font-size: 16px;
		color: #999;
	}
	.el-form-item{
	    margin-bottom: 6px;
	  }
	.serch-btn{
		padding: 7px 8px;
	}
</style>